<template>
  <!-----------首页推荐部分开始------------->
  <div class="heart recom">
    <!--秒杀部分开始-->
    <div class="recom_hd">
      <div class="countdown-title">京东秒杀</div>
      <div class="countdown-desc"><strong>12:00</strong>点场距结束</div>
      <div class="countdown">
        <span class="timer hour">{{ hour }}</span>
        <span class="timer minute">{{ minute }}</span>
        <span class="timer second">{{ second }}</span>
      </div>
    </div>
    <!--秒杀部分结束-->
    <!--秒杀推荐开始-->
    <div class="recom_bd">
      <ul>
        <li><img src="./upload/seckill1.png" alt="图片加载失败" /></li>
        <li><img src="./upload/seckill1.png" alt="图片加载失败" /></li>
        <li><img src="./upload/seckill1.png" alt="图片加载失败" /></li>
        <li><img src="./upload/seckill1.png" alt="图片加载失败" /></li>
        <li><img src="./upload/seckill1.png" alt="图片加载失败" /></li>
      </ul>
    </div>
    <!--秒杀推荐结束-->
  </div>
  <!-----------首页推荐部分结束------------->
</template>

<script>
export default {
  name: "",
  data() {
    return {
      hour: 0,
      minute: 0,
      second: 0,
      timer: undefined,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      var myDate = new Date();
      this.hour = myDate.getHours();
      this.hour > 9 ? this.hour : (this.hour = "0" + this.hour);
      this.minute = myDate.getMinutes();
      this.minute > 9 ? this.minute : (this.minute = "0" + this.minute);
      this.second = myDate.getSeconds();
      this.second > 9 ? this.second : (this.second = "0" + this.second);
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="css" scoped>
.recom {
  height: 280px;
  background-color: #66ccff;
  margin-top: 12px;
}
.recom_hd {
  float: left;
  width: 210px;
  height: 100%;
  background: url(./images/seckill-recom.png) no-repeat;
  background-size: cover;
}
.countdown-title {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-top: 31px;
  color: #fff;
}
.countdown-desc {
  width: 100%;
  text-align: center;
  margin-top: 100px;
  font-size: 14px;
  color: #fff;
}
.countdown-desc strong {
  font-size: 18px;
  padding-right: 2px;
  vertical-align: middle;
}
.countdown {
  width: 130px;
  height: 30px;
  margin: 15px auto;
}
.countdown .timer {
  position: relative;
  float: left;
  display: block;
  margin-right: 20px;
  width: 30px;
  height: 30px;
  background-color: #333;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #fff;
}
.countdown .second {
  margin-right: 0;
}
.countdown .hour::after,
.countdown .minute::after {
  position: absolute;
  display: block;
  content: ":";
  right: -20px;
  font-size: 18px;
  height: 100%;
  width: 20px;
  top: 0;
}
.recom_bd {
  float: left;
}
.recom_bd ul li {
  position: relative;
  float: left;
  width: 198px;
  height: 280px;
}
.recom_bd ul li img {
  width: 100%;
  height: 280px;
  object-fit: cover; /*图片自适应大小*/
}
.recom_bd ul li:nth-child(-n + 4):after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 240px;
  background-color: rgb(187, 181, 181);
  right: 0;
  top: 20px;
}
</style>
